﻿@model OPM.Models.ContactAccount
@using OPM.Class;
@using System.Web.Mvc;

@{
    Layout = "~/Views/Shared/_LayoutPopup.cshtml";
}

@using (Html.BeginForm("EditContactAccount", "GroupList", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="service_search_header">
        <div class="service_title">@Multi.contact1</div>
    </div>
    <div class="service_box_table" style="padding: 0px 0px 0px 20px; overflow: initial;">
        <table id="service_table">
            <tr>
                <td>@Multi.is_secret</td>
                <td>
                    @{
    List<SelectListItem> listItems_Enable = new List<SelectListItem>();
    listItems_Enable.Add(new SelectListItem
    {
        Text = "เปิดเผย",
        Value = "F"

    });
    listItems_Enable.Add(new SelectListItem
    {
        Text = "ปกปิด",
        Value = "T"

    });
   
                    }

                    @Html.DropDownListFor(model => model.cont_is_secret, listItems_Enable)
                </td>
                <td>โทรศัพท์</td>
                <td>
                    <input type="tel" name="cont_tel" value="" id="cont_tel" />
                    <div class="pin_add" onclick="addstrtotext('cont_tel','cont_tel_all');"></div>
                </td>
            </tr>
            <tr>
                <td>@Multi.cont_type</td>
                <td>
                    @{            List<SelectListItem> listItems_contType = new List<SelectListItem>();
                                  listItems_contType.Add(new SelectListItem
               {
                   Text = "บุคคล",
                   Value = "C",

               });
                                  listItems_contType.Add(new SelectListItem
               {
                   Text = "หน่วยงาน/องค์กร",
                   Value = "O",

               });
                                  listItems_contType.Add(new SelectListItem
               {
                   Text = "กลุ่มบุคคล",
                   Value = "M",

               });
                    }
                    @Html.DropDownListFor(model => model.account_type, listItems_contType)

                </td>
                <td rowspan="2">&nbsp;</td>
                <td rowspan="2" class="tdBottom">
                    <textarea style="height: 48px;" id="cont_tel_all"></textarea>
                    <div class="pin_del" style="top: -25px;" onclick="deltext('cont_tel_all');"></div>
                </td>
            </tr>
            <tr>
                <td>@Multi.country</td>
                <td>
                    @Html.DropDownList("country_id", (SelectList)ViewBag.listOfCountry, "")
                </td>
            </tr>
            <tr>
                <td>@Multi.gender</td>
                <td>
                    @Html.DropDownList("gender_id", (SelectList)ViewBag.listOfGender, "เลือกเพศ", null)
                </td>
                <td>@Multi.mobile</td>
                <td>
                    <input type="tel" name="tel" id="cont_mobile" value="" />
                    <div class="pin_add" onclick="addstrtotext('cont_mobile','cont_mobile_all');"></div>
                </td>
            </tr>
            <tr>
                <td class="grouphide2">@Multi.title_name</td>
                <td class="grouphide2">
                    <input type="text" name="title-name" id="cont_title" value=""></td>
                <td rowspan="2">&nbsp;</td>
                <td rowspan="2" class="tdBottom">
                    <textarea style="height: 48px;" id="cont_mobile_all"></textarea>
                    <div class="pin_del" style="top: -25px;" onclick="deltext('cont_mobile_all');"></div>
                </td>
            </tr>
            <tr>
                <td>@Multi.name</td>
                <td>
                    @Html.TextBoxFor(m => m.firstname_th)
                </td>
            </tr>
            <tr>
                <td class="grouphide2">@Multi.lastname</td>
                <td class="grouphide2">
                @Html.TextBoxFor(m => m.lastname_th)
                <td>@Multi.email</td>
                <td>
                    <input type="text" name="tel" value="" id="cont_email_send" />
                    <div class="pin_add" onclick="addstrtotext('cont_email_send','cont_email_send_all');"></div>
                </td>
            </tr>
            <tr>
                <td>@Multi.citizen_id</td>
                <td>
                @Html.TextBoxFor(m => m.citizen_id)
                <td rowspan="2">&nbsp;</td>
                <td rowspan="2" class="tdBottom">
                    <textarea style="height: 48px;" id="cont_email_send_all"></textarea>
                    <div class="pin_del" style="top: -25px;" onclick="deltext('cont_email_send_all');"></div>
                </td>
            </tr>
            <tr>
                <td>@Multi.address</td>
                <td>
                    @Html.TextBoxFor(m => m.address)
                    <input type="text" name="title-name" id="cont_address" value=""></td>
            </tr>
            <tr>
                <td></td>
                <td><span class="note">@Multi.area</span></td>
            </tr>
            <tr id="tabProvince">
                <td>@Multi.province</td>
                <td>@Html.DropDownList("cboProvince", (SelectList)ViewBag.listOfProvinces, "จังหวัด", null) </td>
            </tr>
            <tr id="tabDistricts">
                <td>@Multi.district</td>
                <td>@Html.DropDownList("cboDistricts", (SelectList)ViewBag.listOfDistricts, "อำเภอ", null)</td>
            </tr>
            <tr id="tabSubDistricts">
                <td>@Multi.subdistrict</td>
                <td>@Html.DropDownList("cboSubDistricts", (SelectList)ViewBag.listOfSubDistricts, "ตำบล", null)</td>
            </tr>
            <tr>
                <td class="grouphide1">@Multi.cont_number</td>
                <td class="grouphide1">
                    <input type="text" name="title-name" id="cont_number" class="half-input" value="0">
                    @Multi.people</td>
            </tr>
            <tr>
                <td class="grouphide2">@Multi.type</td>
                <td class="grouphide2">

                    @{            List<SelectListItem> listItems_defective = new List<SelectListItem>();
                                  listItems_defective.Add(new SelectListItem
                                  {
                                      Text = "ปกติ",
                                      Value = "T",

                                  });
                                  listItems_defective.Add(new SelectListItem
                                  {
                                      Text = "ผู้พิการ",
                                      Value = "O",

                                  });
   
                    }
                    @Html.DropDownListFor(model => model.is_defective, listItems_defective)
                </td>
            </tr>
            <tr>
                <td>@Multi.postcode</td>
                <td>
                @Html.TextAreaFor(m => m.remark, new { })
                <td rowspan="2">หมายเหตุ</td>
                <td rowspan="2" class="tdBottom">
                    <textarea style="height: 48px;" id="cont_remark"></textarea>
                </td>
            </tr>
            <tr>
                <td class="grouphide2">@Multi.birthdate</td>
                <td class="grouphide2">
                    <input type="date" name="date-input" class="date-input" id="cont_birthday" value="" />
                </td>

            </tr>
        </table>
    </div>
    <div class="BoxServiceBottom">
        <div class="BoxServiceActionPrev floatL" onclick="parent.$.fn.colorbox.close();">@Multi.Cancel</div>
        <input class="BoxServiceActionNext floatR" type="submit" value="@Multi.edit" onclick="return CheckData();" />
        <div class="clear"></div>
    </div>
}

<script src="~/js/jquery-ui.min.js"></script>

<script type="text/javascript">

    var locationToRedirect = '';

    $(document).ready(function () {
        $("#cont_type").change(function () {
            var myType = $(this).val();
            if (myType == 'C') {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', true);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', false);
                $(".grouphide1").css('color', '#aaa');
                $(".grouphide2").css('color', '#000');
                $(".grouphide1 img").css('opacity', '0');
                $(".grouphide2 img").css('opacity', '1');
            } else if (myType == 'O') {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', false);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', true);
                $(".grouphide1").css('color', '#000');
                $(".grouphide2").css('color', '#aaa');
                $(".grouphide1 img").css('opacity', '1');
                $(".grouphide2 img").css('opacity', '0');
            } else if (myType == 'M') {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', false);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', true);
                $(".grouphide1").css('color', '#000');
                $(".grouphide2").css('color', '#aaa');
                $(".grouphide1 img").css('opacity', '1');
                $(".grouphide2 img").css('opacity', '0');
            } else {
                $(".grouphide1 input , .grouphide1 select").prop('disabled', false);
                $(".grouphide2 input , .grouphide2 select").prop('disabled', false);
                $(".grouphide1").css('color', '#000');
                $(".grouphide2").css('color', '#000');
                $(".grouphide1 img").css('opacity', '1');
                $(".grouphide2 img").css('opacity', '1');
            }
        });

        $("#cont_country_id").change(function () {
            var Country = $("#cont_country_id option:selected").text();

            if (Country == 'ไทย') {
                $("#tabProvince , #tabDistricts , #tabSubDistricts").show();
            } else {
                $("#tabProvince , #tabDistricts , #tabSubDistricts").hide();
            }
        });
        $("#cboProvince").change(function () {
            var url = "@Url.Content("~/Complaint/GetDistrictsJson")?provinceId=" + $(this).val();
            $.getJSON(url)
              .done(function (json) {
                  $('#cboDistricts').html('');
                  $.each(json, function (i, data) {
                      $('#cboDistricts').append(
                          '<option value="' + data.Id + '">' + data.Name + '</option>'
                      );
                  }
              )
              })
              .fail(function (jqxhr, textStatus, error) {
                  var err = textStatus + ", " + error;
                  console.log("Request Failed: " + err);
              });
        });

        $("#cboDistricts").change(function () {
            var url = "@Url.Content("~/Complaint/GetSubDistrictsJson")?districtId=" + $(this).val();
            $.getJSON(url)
              .done(function (json) {
                  $('#cboSubDistricts').html('');
                  $.each(json, function (i, data) {
                      $('#cboSubDistricts').append(
                          '<option value="' + data.Id + '">' + data.Name + '</option>'
                      );
                  }
              )
              })
              .fail(function (jqxhr, textStatus, error) {
                  var err = textStatus + ", " + error;
                  console.log("Request Failed: " + err);
              });
        });
        $("#cboSubDistricts").change(function () {
            locationToRedirect += $("#cboSubDistricts option:selected").text() + " ";
            locationToRedirect += $("#cboDistricts option:selected").text() + " ";
            locationToRedirect += $("#cboProvince option:selected").text() + " ";
            locationToRedirect += $("#cont_country_id option:selected").text();
            parent.addTextLocation2(locationToRedirect);
            console.log(locationToRedirect);

        });
    });


    function sendDataToParent() {

        var cont_is_secret = $("#cont_is_secret").val();
        parent.$("#cont_is_secret").val(cont_is_secret); //ปกปิดข้อมูล

        var cont_tel_all = $("#cont_tel_all").val();
        parent.$("#cont_tel_all").val(cont_tel_all); //โทรศัพท์

        var cont_country_id = $("#cont_country_id").val();
        parent.$("#cont_country_id").val(cont_country_id); //ประเทศ

        var cont_type = $("#cont_type").val();//ประเภทบุคคล
        parent.$("#cont_type").val(cont_type);

        var cont_gender_id = $("#cont_gender_id").val();
        parent.$("#cont_gender_id").val(cont_gender_id); //เพศ

        var cont_mobile_all = $("#cont_mobile_all").val();
        parent.$("#cont_mobile_all").val(cont_mobile_all); //โทรศัพท์เคลื่อนที่

        var cont_title = $("#cont_title").val();
        parent.$("#cont_title").val(cont_title);

        var cont_firstname = $("#cont_firstname").val();
        parent.$("#cont_firstname").val(cont_firstname);

        var cont_lastname = $("#cont_lastname").val();
        parent.$("#cont_lastname").val(cont_lastname); //นามสกุล

        var cont_email_send_all = $("#cont_email_send_all").val();
        parent.$("#cont_email_send_all").val(cont_email_send_all); //อีเมล์

        var cont_citizen_id = $("#cont_citizen_id").val();
        parent.$("#cont_citizen_id").val(cont_citizen_id); //บัตรประชาชน

        var cont_address = $("#cont_address").val();
        parent.$("#cont_address").val(cont_address); //ที่อยู่

        var cont_province_id = $("#cboProvince").val();
        parent.$("#cont_province_id").val(cont_province_id); //จังหวัด

        var cont_district_id = $("#cboDistricts").val();
        parent.$("#cont_district_id").val(cont_district_id); //อำเภอ

        var cont_subdistrict_id = $("#cboSubDistricts").val();
        parent.$("#cont_subdistrict_id").val(cont_subdistrict_id); //ตำบล

        var cont_is_defective = $("#cont_is_defective").val();
        parent.$("#cont_is_defective").val(cont_is_defective); //ประเภท

        var cont_postcode = $("#cont_postcode").val();
        parent.$("#cont_postcode").val(cont_postcode); //รหัสไปรษณีย์

        var cont_number = $("#cont_number").val();
        parent.$("#cont_number").val(cont_number); //จำนวน

        var cont_remark = $("#cont_remark").val();
        parent.$("#cont_remark").val(cont_remark); //หมายเหตุ

        var cont_birthday = $("#cont_birthday").val();
        parent.$("#cont_birthday").val(cont_birthday); //วันเกิด

        var contact = $("#cont_firstname").val();
        parent.$("#contact").val(contact); //ผู้ติดต่อ

        var cont_contact_detail = "";
        if (cont_tel_all == "") {

            cont_contact_detail = cont_tel_all;

        } else if (cont_mobile_all == "") {
            cont_contact_detail = cont_tel_all + "," + cont_mobile_all;

        }
        else if (cont_email_send_all == "") {
            cont_contact_detail = cont_tel_all + "," + cont_mobile_all + "," + cont_email_send_all;
        }
        else {
            cont_contact_detail = cont_contact_detail;

        }

        var cont_contact_detail = $("#cont_contact_detail").val();
        parent.$("#cont_contact_detail").val(cont_contact_detail); //วันเกิด

        if (cont_contact_detail == "") {
            alert("โปรดระบุหมายเลขโทรศัพท์หรืออีเมล์");
        }
        else {
            parent.$.fn.colorbox.close();
        }
    }


    function addstrtotext(boxinput, boxoutput) {
        var str = $('#' + boxinput).val();
        var str2 = $('#' + boxoutput).val();
        if (str2 != '') {
            str = str2 + ',' + str;
        } else {
            str = str
        }
        $('#' + boxoutput).val(str);
        $('#' + boxinput).val('').focus();
    }
    function deltext(boxoutput) {
        $('#' + boxoutput).val('');
    }
</script>
